<template>
    <div class="login">
        <header>
            <div @click="returnPage" class="header_l">
                <i class="iconfont icon-return"></i>
            </div>
            <h1> 登录/注册 </h1>
        </header>
        <div class="loginBox">
            <div class="hd">
                <span>欢迎光临，登录后体验更多服务</span>
                <mu-tabs style="float: right;width: 104px;" :value.sync="active" color="transparent" indicator-color="#ff3838" full-width>
                    <mu-tab>登录</mu-tab>
                    <mu-tab>注册</mu-tab>
                </mu-tabs>
            </div>
            <div class="demo-text" v-if="active === 0">
                <!-- 登录 -->
                <div class="bd">
                    <ul>
                        <div class="table_box">
                            <form name="formLogin" action="user.php" method="post" onsubmit="return userLogin()">
                                <dl>
                                    <dd>
                                        <label class="leftlabel">
                                            <select name="login_type">
                                                <option>用户名</option>
                                                <option>会员卡</option>
                                            </select>
                                        </label>
                                    </dd>
                                </dl>
                                <dl>
                                    <dd>
                                        <input v-model="loginform.name" placeholder="用户名/手机/电子邮件地址" name="username" type="text" class="inputBg">
                                    </dd>
                                </dl>
                                <dl>
                                    <dd>
                                        <input v-model="loginform.key" placeholder="密码" name="password" type="password" class="inputBg">
                                    </dd>
                                </dl>
                                <dl style="display:none;">
                                    <dd>
                                        <input type="checkbox" checked="checked" value="1" name="remember" style="vertical-align:middle; zoom:200%;">
                                        <label for="remember"> 一个月内免登录</label>
                                    </dd>
                                </dl>
                                <dl>
                                    <dd>
                                        <input type="button" name="submit" @click="dologin" value="立即登陆" class="c-btn3">
                                    </dd>
                                </dl>
                            </form>
                            <dl>
                                <dd>
                                    <span class="f6">邮件找回密码</span>
                                </dd>
                            </dl>
                            <div class="hezuo">
                                <p class="t">使用合作账号登录</p>
                                <p class="b">
                                    <img src="../assets/img/weibo.png">
                                    <img src="../assets/img/zhifb.png">
                                </p>
                            </div>
                        </div>
                    </ul>
                </div>
            </div>
            <div class="demo-text" v-if="active === 1">
                <!-- 注册 -->
                <div class="bd">
                    <ul>
                        <form action="user.php" method="post" name="formUser" onsubmit="return register();">
                            <input type="hidden" name="flag" id="flag" value="register">
                            <div class="table_box">
                                <dl>
                                    <dd>
                                        <input v-model="regform.loginName" placeholder="请输入用户名" class="inputBg" name="username" id="username" type="text">
                                    </dd>
                                </dl>
                                <dl>
                                    <dd>
                                        <input v-model="regform.loginKey" placeholder="请输入帐号密码" class="inputBg" name="password" id="mobile_pwd" type="password">
                                    </dd>
                                </dl>

                                <dl>
                                    <dd>
                                        <input v-model="regform.mobile" placeholder="手机" class="inputBg" name="extend_field5" id="extend_field5" type="text">
                                    </dd>
                                </dl>
                                <dl>
                                    <dd>
                                        <select name="sel_question" class="inputBg w94" v-model="regform.question">
                                            <option value="0">请选择密码提示问题</option>
                                            <option value="我最好朋友的生日？">我最好朋友的生日？</option>
                                            <option value="我儿时居住地的地址？">我儿时居住地的地址？</option>
                                            <option value="我的座右铭是？">我的座右铭是？</option>
                                            <option value="我最喜爱的电影？">我最喜爱的电影？</option>
                                            <option value="我最喜爱的歌曲？">我最喜爱的歌曲？</option>
                                            <option value="我最喜爱的食物？">我最喜爱的食物？</option>
                                            <option value="我最大的爱好？">我最大的爱好？</option>
                                            <option value="我最喜欢的小说？">我最喜欢的小说？</option>
                                            <option value="我最喜欢的运动队？">我最喜欢的运动队？</option>
                                        </select>
                                    </dd>
                                </dl>
                                <dl>
                                    <dd>
                                        <input v-model="regform.answer" placeholder="密码问题答案" name="passwd_answer" type="text" class="inputBg">
                                    </dd>
                                </dl>

                                <dl>
                                    <dd>
                                        <input id="agreement" name="agreement" type="checkbox" value="1" checked="checked" style="vertical-align:middle; zoom:200%;">
                                        <label for="agreement" style="font-size:14px;"> 我已看过并同意《
                                            <a href="article.php?cat_id=-1">用户协议</a>》</label>
                                    </dd>
                                </dl>
                                <dl>
                                    <dd>
                                        <input name="act" type="hidden" value="act_register">
                                        <input name="enabled_sms" type="hidden" value="1">
                                        <input type="hidden" name="back_act" value="http://www.anyyin.com/mobile/index.php">
                                        <button type="button" class="c-btn3" @click="doreg">
                                            下一步
                                        </button>
                                    </dd>
                                </dl>
                            </div>
                        </form>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import {createNamespacedHelpers} from 'vuex'
const {mapActions,mapState} = createNamespacedHelpers('login')
import ss from '../Plug/session.js'
export default {
  data() {
    return {
      active: 0,
      loginform:{
        name:'',
        key:''
      },
      regform:{
          name:'',
          email:'',
          type:'',
          gender:'',
          question:0,
          status:1
      }
    }
  },
  methods: {
    ...mapActions(['login','reg']),
    returnPage() {
      this.$router.back('-1')
    },
    dologin(){
        if(this.loginform.name==''||this.loginform.key==''){
            alert('用户名或密码不能为空！')
            return
        }
        this.login(this.loginform).then(()=>{
            this.$router.back('-1')
        })
    },
    doreg(){
        this.reg(this.regform).then(()=>{
            alert('注册成功，即将登陆！')
            this.active=0
        })
    }
  }
}
</script>

<style scoped>
/* tab切换 */
.loginBox .hd .frwp {
  float: right;
  width: 104px;
}
.mu-tabs {
  color: #333 !important;
}
.mu-tab {
  height: 40px !important;
  min-width: 20px;
}
.mu-tab-active {
  color: #ff3838;
}
/*****************/
button,
input,
select,
textarea {
  font-size: 100%;
}
.f6 {
  font-size: 12px;
  color: #1ca2e1;
  height: 28px;
  line-height: 28px;
  padding: 0;
  margin-right: 45px;
  display: inline-block;
  border: none;
  background: none;
  vertical-align: top;
}
.leftlabel > select {
  background-color: #fff;
  height: 27px;
  font-size: 14px;
  outline: none;
}
.c-btn3 {
  color: #fff;
  border: 0;
  height: 40px;
  line-height: 40px;
  width: 100%;
  -webkit-box-flex: 1;
  display: block;
  font-size: 14px;
  background: #ff3838;
  text-align: center;
}
.inputBg {
  outline: none;
  height: 38.4px;
  width: 100%;
  border: solid 1px #ddd;
  padding: 0 3%;
  color: #333;
  font-size: 13px;
  border-radius: 0;
  background: #fff;
}
.inputBg.w94 {
  width: 94%;
}
.hezuo .b img {
  width: 51px;
  height: 51px;
  border: none;
  display: inline-block;
  margin: 0 11.2px 8px 0;
}
.hezuo .b {
  display: block;
}
.hezuo .t {
  font-size: 14px;
  height: 38px;
  line-height: 38px;
}
.table_box dl {
  padding: 7px 0;
  display: table;
  width: 100%;
}
.table_box dd {
  display: table-cell;
}
form {
  display: block;
  margin-top: 0;
}
.loginBox .bd ul {
  padding: 0px 3.2px;
}
/* hd */
.loginBox {
  margin: 10px auto;
}
.loginBox .hd {
  height: 43.2px;
  line-height: 43.2px;
  font-size: 18px;
  overflow: hidden;
}
.loginBox .hd span {
  float: left;
  font-size: 13px;
}
/* 头部 */
header {
  z-index: 999;
  background-color: #ff3838;
  position: relative;
  height: 48px;
  display: block;
}
header .header_l {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
}
header .header_l i {
  font-size: 26px;
  color: #fff;
  font-weight: bold;
}
header h1 {
  color: #fff;
  font-size: 18px;
  line-height: 48px;
  text-align: center;
  font-weight: normal;
  margin: 0;
}
</style>
